<template>
  <!-- oa系统常用表格 -->
  <!-- selection-change 当多选状态改变时触发 -->
  <div class="quitOperation">
    <div class="quit">
      <el-button type="primary"
                 :disabled="quitArray.length===0"
                 @click="confirmQuit">确认离职</el-button>
    </div>
  </div>
  <div class="QuitTable">
    <el-table ref="multipleTableRef"
              :data="curData"
              border
              style="width: 90%; max-height: 400px;"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column property="name" label="姓名" width="117"></el-table-column>
      <el-table-column property="dept" label="部门" width="180"></el-table-column>
      <el-table-column property="post" label="岗位" width="150"></el-table-column>
      <el-table-column property="phone" label="手机号码" width="160"></el-table-column>
      <el-table-column property="status" label="状态" width="130"></el-table-column>
      <el-table-column property="entryDate" label="入职时间" width="200"></el-table-column>
    </el-table>
    <my-pagination class="quit-pagination"
                   :totalSize="totalSize"
                   :pageSize="pageSize"
                   :cur="cur"
                   :totalPage="totalPage"></my-pagination>
  </div>
</template>

<script>
  import MyDialog from '@/components/dialogs/myDialog/MyDialog'
  import MyPagination from '@/components/myPagination/MyPagination'
  import MySearch from '@/components/mySearch/MySearch'
  import {myMixin} from "../../../../plugins/mixin";

  export default {
    name: "Quit",
    mixins: [myMixin],
    data() {
      return {
        quitArray: []
      }
    },
    methods: {
      handleSelectionChange() {},
      /* 多选框状态改变 */
      handleSelectionChange(arr) {
        this.quitArray = arr;
      },
      /* 获取所有选中的员工编号 */
      async getQuitWorkerIds() {
        const ids = [];
        for (const item of this.quitArray) {
          ids.push(item.workerId);
        }
        return ids;
      },
      /* 确认离职 */
      async confirmQuit() {
        const ids = await this.getQuitWorkerIds();
        if (ids.length > 0) {
          this.$confirm('确定将已选择员工离职处理?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.quit(ids);
            this.$message({
              type: 'success',
              message: '操作已完成!',
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
        }
      },
      /* 转正更新数据库 */
      async quit(ids) {
        await this.$request('/employee/quit', {
          quitIds: ids,
        });
        await this.showQuits();
        this.changePage(this.cur);
      },
      /* 展示数据 */
      async showQuits() {
        let result = await this.$request('/employee/list');
        this.tableData = [];
        for (const item of result.data) {
          if (item.visibility === '2' && item.status !== '已离职') {
            this.tableData.push(item);
          }
        }
      }
    },
    components: {
      MyDialog,
      MyPagination,
      MySearch
    },
    async mounted() {
      console.log("Quit.vue created!");
      await this.showQuits();
      this.curData = this.tableData.slice(0, this.pageSize);
      // MyPagination
      this.$bus.on("changePageNumber", (cur) => {
        this.changePage(cur);
      });
    }
  }
</script>

<style scoped>
  .quitOperation {
    display: flex;
    justify-content: space-between;
    padding: 0 80px 0 30px;
    margin-bottom: 20px;
  }

  .QuitTable {
    margin-left: 30px;
  }
  .quit-pagination {
    margin-right: 50px;
  }
</style>